<template>
  <div class="add-button w-35px h-35px">
    <button class="center~ w-full h-full border border-gray-200 bg-light-50 rounded cursor-pointer"
            @click="setActive">
      <i class="i-carbon-add"></i>
    </button>
    <div class="content w-200px h-100px bg-light-50 rounded" v-show="active">
      <slot/>
    </div>
  </div>
</template>

<script setup lang="ts">
import {useActive} from "@/hooks";

const {active, setActive} = useActive(false)
</script>

<style scoped>
.add-button {
  position: relative;
}

.content {
  bottom: -110px;
  position: absolute;
  box-shadow: 0 0 10px var(--gray);
}
</style>